<template>
    <div v-if="showScan" class="scanBox">
        <qr-stream @decode="onDecode" @init="scanInit" class="mb" >
            <div style="color: red;" class="frame"></div>
        </qr-stream>
        <div class="scanLine"></div>
    </div>
    <div v-else class="indexBox">
        <div class="hsnl" @click="showScan=true">扫码核销绿色能量</div>
    </div>
    <my-dailog v-model:show="showFlag">
        <div class="dgbox">
            <h3>是否确认扣除{{exchangeInfo.energyAmount}}g绿色能量兑换{{exchangeInfo.exchangeName}}{{exchangeInfo.exchangeItemId==1?'*1':''}}</h3>
        </div>
        <template v-slot:footer>
            <div class="autDgBtn">
                <div class="bItem">
                    <my-button text="确定" @click="scanComfirm"/>
                </div>
                <div class="bItem">
                    <my-button text="关闭" @click="showFlag=false"/>
                </div>
            </div>
        </template>
    </my-dailog>
</template>

<script>
import {reactive,toRefs, onMounted,computed,getCurrentInstance } from 'vue'
import { useStore } from 'vuex'
import {useRouter} from 'vue-router'
import {toast,confirm} from '@/utils/common'
import mainWrap from '@/components/mainWrap.vue'
import myDailog from '@/components/myDailog.vue'
import myButton from '@/components/myButton.vue'
import Cookies from '@/utils/auth'
import { QrStream, QrCapture, QrDropzone } from 'vue3-qr-reader';
export default {
    components:{
        mainWrap,
        myDailog,
        myButton,
        QrStream,
        QrCapture,
        QrDropzone
    },
    setup(){
        const store = useStore()
        const router = useRouter()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            showScan:false,
            qrResult:'',
            showFlag:false,
            exchangeInfo:{}
        })

        onMounted(()=>{
            //confirm('提示信息','当发生的发生是否都十分的舒服的沙发','',{showCancelButton:true})
            const token = Cookies.get('token')
            if(!token){
                router.push('/login')
            }
        })

        const scanInit = (promise)=>{
            //console.log("scanInit:",promise)
            // 获取摄像头失败
            promise.catch(err=>{
                toast(err.toString())
                state.showScan = false
            })
        }

        // 扫描结果获取
        const onDecode = (data) => {
            setTimeout(()=>{
                state.qrResult = data
                state.showScan = false
                //state.showFlag = true
                getInfo()
            },500)
            
            console.log("扫描结果:",data)
        }

        // 扫描成功后获取兑换信息
        const getInfo = async ()=>{
            const res = await store.dispatch('user/getExchangeInfo',{
                qrCodeToken:state.qrResult,
            })
            if(res.status==401){
                confirm('提示信息','登录认证失效')
                router.push('/login')
                return
            }else if(res.code!=200){
                return confirm('提示信息',res.message)
            }
           // if(res.code!=200) return confirm('提示信息',res.message)
            state.exchangeInfo = res.data
            state.showFlag = true
        }

        // 扫描成功后确认
        const scanComfirm = async ()=>{
            const res = await store.dispatch('user/scanComfirm',{
                qrCodeToken:state.qrResult,
            })
            if(res.code!=200) return confirm('提示信息',res.message)
            state.showScan = false
            state.showFlag = false
            toast('绿色能量扣除成功')
        }

        return {
            ...toRefs(state),
            scanInit,
            onDecode,
            scanComfirm
        }
    }
}
</script>

<style lang="scss" scoped>
.indexBox{
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .hsnl{
        display: flex;
        width: 600px;
        height: 200px;
        background: #eee;
        box-shadow: 0 0 10px #bdbbbb;
        align-items: center;
        justify-content: center;
        font-size: 38px;
        font-weight: 500;
        color: var(--listBgColor);
    }
}
.scanBox{
    position: fixed;
    width: 100%;
    height: 100%;
    background: #333;
    z-index: 100;
    .scanLine{
        position: absolute;
        z-index: 101;
        width: 100%;
        height: 100px;
        left: 0;
        background: linear-gradient(180deg, rgba(0, 255, 51, 0) 50%, #00ff33 300%);
        border-bottom: 2px solid #00ff33;  

        animation-name:animateLine;
	    animation-duration:4s;
	    animation-timing-function:linear; 
        animation-iteration-count:infinite;

        -webkit-animation-name:animateLine;
	    -webkit-animation-duration:4s;
	    -webkit-animation-timing-function:linear;  
        -webkit-animation-iteration-count:infinite;
    }
}

@keyframes animateLine
{
    from {
        top: 10%;
        opacity: 1;
    }
    to {
        top: 90%;
        opacity: 0;
    }
}
 
@-webkit-keyframes animateLine /* Safari 与 Chrome */
{
    from {
        top: 10%;
        opacity: 1;
    }
    to {
        top: 90%;
        opacity: 0;
    }
}
    
.autDgBtn{
        display: flex;
        padding: 30px 0 10px 0;
        .bItem{
            flex: 1;
            padding: 0 15px 0 0;
            &.oneBtn{
                padding: 0;
            }
            &+.bItem{
                padding: 0 0 0 15px;
            }
        }
}
.dgbox{
    h3{
        font-size: 34px;
        color: #fff;
        font-weight: normal;
        padding: 20px 0;
        line-height: normal;
    }
}
</style>